<template>
  <div class="bottomFrame" v-if='flag'>
    <div @click.stop='hideFrame' class='frame-wrapper' >
      <div class='frame' @click.stop=''>
        <div class='content'>
                    <text  class="mine-order-icon iconfont icon-close bottomFrame-icon-close" @click='hideFrame'>&#xe77c;</text>
          <div class='bottomFrame-top mg-R30 pd-B30'>
            <div class="content_main_top">
<!--              <text class="content_main_top_title">选择到账银行卡</text>-->
              <text class="content_main_top_title">选选择以下账号</text>
              <!--              <text class="content_main_top_content">请留意各银行到账时间</text>-->
            </div>
          </div>

          <list style="height: 650px">
            <cell>
              <div class="submit_payMethod"  >
               <div class="submit_payMethod_Content"  v-for="(item,index) in accountlist" @click="selectbank(item,index)">
              <div>
                <div class="submit_payMethod_Content_Column_wrap">
                  <div class="submit_payMethod_Content_Column_image">
                    <image v-if="item.bankInfoId == 30" style="width: 50px;height: 50px" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/bankJH.png"></image>
                    <image v-else-if="item.bankInfoId == 2" style="width: 50px;height: 50px" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/Alipay.png"></image>
                    <image v-else-if="item.bankInfoId == 1" style="width: 50px;height: 50px;" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/weixin1.png"></image>
                    <image v-else  style="width: 50px;height: 50px" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/bankAll.png"></image>
                  </div>
                  <div class="submit_payMethod_Content_Title_wrap">
<!--                    <text class="submit_payMethod_Content_Title">建设银行储蓄卡{0219}</text>-->
                    <text class="submit_payMethod_Content_Title"> {{item.bankName}}  {{item.bankNum}}</text>
                    <!--                    <text class="submit_product_details_IntroductionTwo">2小时内到账</text>-->
                  </div>
                </div>
              </div>
              <image v-if="index == num" style="width: 50px;height: 50px" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/Hook.png"></image>
            </div>
               <div  class="submit_payMethod_Content"  style="display: flex;align-items: center;" @click="addNewCard">
                <div>
                <div class="submit_payMethod_Content_Column_wrap">
                  <div class="submit_payMethod_Content_Column_image">
                    <image style="width: 50px;height: 50px" src="https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/img/bank.png"></image>
                  </div>
                  <div class="submit_payMethod_Content_Title_wrap" >
                    <text class="submit_payMethod_Content_Title">使用新卡提现支付 </text>
                  </div>
                </div>
              </div>
                  <div>
                    <text style="font-size: 28px" class="mine-order-icon">&#xe65e;</text>
                  </div>
               </div>
              </div>
           </cell>
          </list>
        </div>
        <div>
        <div style="display: flex;flex-direction: row;justify-content: center;" >
          <div style="background-color:#ff8400;" class="bottomFrame-button  botton_Fz_Color" @click="submit">
            <text style="color: #ffffff;font-size: 40px">确定</text>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import {
  list as accountlist
} from '../../api/account'

const eeui = app.requireModule('eeui');
export default {
  data() {
    return {
      num: '1',
      accountlist:[],
      accountlistitem:{},

      isClose: "", //控制是关闭弹窗还是跳转订单确认页面
      flag: false,

    }
  },
  mounted() {
    // this.getOrderCount()
    this.getBank()
  },
     pageResume: function (data) {
           this.getBank()
        },
  methods: {
    selectbank(item,index){
      this.num = index
      this.accountlistitem = item
    },
    getBank(){
      accountlist().then(res=>{
        this.accountlist = res.data
      }).catch(respond=>{

      })
    },

    //隐藏底部弹窗
    hideFrame() {
      setTimeout(() => {
        this.setData({
          flag: false
        })
      }, 400)
    },
    addNewCard(){
      console.log("321321")
      eeui.openPage({
        url: 'root://pages/member/distribution/addBank',
            statusBarType: 'immersion',
            statusBarStyle: false
          }, (result) => {}
      );
    },

      submit(){
          this.hideFrame();
          this.$emit('selectedInfo',this.accountlistitem);
      },
    //显示底部弹窗
    showFrame(id, type) {
      this.flag = true
    },

    //隐藏底部弹窗
    hideFrame() {
      this.wrapAnimate = 'wrapAnimateOut'
      this.frameAnimate = 'frameAnimateOut'
      setTimeout(() => {
        this.flag = false
      }, 400)
    },

  }
}
</script>

<style lang="css" src="../../style/wx.css" />
<style scoped>
.bottomFrame{
  border-style:solid;
  background-color: #A1A1A1;
  border-width:1px;
  border-color:#000;
  z-index: 200;
  position: fixed;
}

.frame-wrapper {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 201;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* border-top-left-radius: 20px;
  border-top-right-radius: 20px; */
}

.frame {
  background-color: #fff;
  position: absolute;
  bottom: 0px;
  width: 750px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 201;
}

.content{
  padding: 30px 0 0 30px;
  position: relative;
  min-height: 800px;
}

.bottomFrame-icon-close{
  /*width: 70px;*/
  /*height: 70px;*/
  position: absolute;
  right: 30px;
  font-size:38px
}

.bottomFrame-top{
  display: flex;
  flex-direction: row;
  border-bottom-style: solid;
  border-bottom-width:2px;
  border-bottom-color:rgba(211, 211, 211, 0.719);
}


/* 以下是弹窗的动画效果 */
.wrapAnimate {
  /* animation: wrapAnimate 0.5s ease-in-out forwards; */
  transition-timing-function: ease-in-out;
  transition-duration: 0.5s;
  transition-property:  height;
}

@keyframes wrapAnimate {
  0% {
  }

  100% {
    background: rgba(0, 0, 0, 0.35);
  }
}

.wrapAnimateOut {
  animation: wrapAnimateOut 0.5s ease-in-out forwards;
}

@keyframes wrapAnimateOut {
  0% {
    background: rgba(0, 0, 0, 0.35);
  }

  100% {
    background: rgba(0, 0, 0, 0);
  }
}

.frameAnimate {
  /* animation: frameAnimate 0.5s ease forwards; */
  transition-timing-function: ease;
  transition-duration: 0.5s;
  transition-property:  height, background-color;
}

@keyframes frameAnimate {
  0% {
  }

  100% {
    opacity: 1;
    top: 0px;
  }
}

.frameAnimateOut {
  /* animation: frameAnimateOut 0.5s ease forwards; */
  transition-timing-function: ease;
  transition-duration: 0.5s;
  transition-property:  height, background-color;
}

@keyframes frameAnimateOut {
  0% {
    opacity: 1;
    top: 0px;
  }

  100% {
    opacity: 0;
    bottom: 0px;
  }
}
.content{
  padding-top: 30px;
  padding-left: 30px;
  padding-bottom: 30px;
  padding-right: 30px;
  /* padding: 30px 0 0 30px; */
  /*position: relative;*/
}

.bottomFrame-icon-close{
  font-size: 50px;
  color: black;
  position: absolute;
  /* right: 30px; */
  left: 30px;
  color: #A1A1A1;
}

.bottomFrame-top{
  display: flex;
  flex-direction: row;
  /* border-bottom-color:rgba(211, 211, 211, 0.719);
  border-bottom-width:1px;
  border-bottom-style: solid; */
  /* border-bottom: 2px solid  rgba(211, 211, 211, 0.719); */
}

.bottomFrame-top image{
  width: 200px;
  height: 200px;
  margin-right: 20px;
  border-radius: 6px;
}

.bottomFrame-attribute-tag image{
  width: 50px;
  height:50px;
  border-radius: 8px;
  margin-right: 20px;
}

.bottomFrame-attribute-tag text{
  font-size: 28px;
  letter-spacing: 2px;
}


/* 以下是弹窗的动画效果 */
.wrapAnimate {
  animation: wrapAnimate 0.5s ease-in-out forwards;
}

@keyframes wrapAnimate {
  0% {
  }

  100% {
    background: rgba(0, 0, 0, 0.35);
  }
}

.wrapAnimateOut {
  animation: wrapAnimateOut 0.5s ease-in-out forwards;
}

@keyframes wrapAnimateOut {
  0% {
    background: rgba(0, 0, 0, 0.35);
  }

  100% {
    background: rgba(0, 0, 0, 0);
  }
}

.frameAnimate {
  animation: frameAnimate 0.5s ease forwards;
}

@keyframes frameAnimate {
  0% {
  }

  100% {
    opacity: 1;
    top: 0vh;
  }
}

.frameAnimateOut {
  animation: frameAnimateOut 0.5s ease forwards;
}

@keyframes frameAnimateOut {
  0% {
    opacity: 1;
    top: 0vh;
  }

  100% {
    opacity: 0;
    top: 100vh;
  }
}


.content_main_top{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bottomFrame-top{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.content_main_top_title{
  font-size:29px;
  font-weight: bold;
  letter-spacing: 7px;

}


.submit_payMethod {
  width: 690px;
  padding: 25px;
  box-sizing: border-box;
  /*margin-left: 30px;*/
  /* margin-top: 30px; */
  background-color: white;
  border-radius: 16px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color:#f4f4f4;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color:#f4f4f4;
}

.submit_payMethod_Content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  /* align-items: center; */
  /*margin-top: 50px;*/
  margin-top: 20px;
  margin-bottom: 20px;
}
.submit_payMethod_Content_Title {
  /*font-size: 32px;*/
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  display: block;
}

.submit_payMethod_Content_Title_wrap{
  padding-left: 50px;
  display: flex;
  flex-direction: column;
}
.submit_payMethod_Content_Column_wrap{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.submit_payMethod_Content_Column_image{
  /*padding-right: 10px;*/
  display: flex;
  flex-direction: row;
}
/*.submit_payMethod_Content_Column_image > image{*/
/*  width:48px;*/
/*  height:48px;*/
/*}*/
.mine-order-icon {
  /*margin-bottom: 15px;*/
  font-family: iconfont2;
  /*width: 60px;*/
  /*height: 60px;*/
  font-size: 20px!important;
  /*color: #DFBB85;*/
}

.bottomFrame-button{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width:380px;
    height:80px;
    margin: 20px 20px;
    border-radius: 20px;
}
</style>









